<template>
	
	<view class="content">
		<view style="font-weight: bold;text-align: center;"></view>
		<!-- <cu-custom bgColor="bg-gradual-blue">
			 <block slot="content">传统文化</block> 
		</cu-custom> -->
		<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" circular="true" previous-margin="20px" next-margin="20px">
			<swiper-item v-for="(item, index) in info" :key="index" >
				<view :class="item.colorClass" class="swiper-item">
					<image class="image" :src="item.url" mode="aspectFill" />
				</view>
			</swiper-item>
		</swiper>
		
		<view class="box1">
			<view class="innerbox">
				<view class="innerbox1" @click="toDetail()">
					<image src="https://alifei02.cfp.cn/creative/vcg/nowater800/new/VCG211135610949.jpg"></image>
					<p>传承中华文化</p>
				</view>
				<view class="innerbox1">
					<image src="https://tenfei01.cfp.cn/creative/vcg/nowarter800/new/VCG211164884317.jpg"></image>
					<p>古代形容颜色的词语</p>
				</view>
			</view>
			<view class="innerbox">
				<view class="innerbox1">
					<image src="https://alifei05.cfp.cn/creative/vcg/nowater800/new/VCG211277297467.jpg"></image>
					<p>宋代青花瓷烧制方法</p>
				</view>
				<view class="innerbox1">
					<image src="https://tenfei01.cfp.cn/creative/vcg/nowater800/new/VCG211144055044.jpg"></image>
					<p>国画鉴赏</p>
				</view>
			</view>
		</view>
		
		<view class="tweetAll" v-for="(item, index) in ShemeList" :key="index">
		  <navigator>
		    <view class="tweet">
		      <view class="tweet_title">
		        {{item.tweetTitle}}
		      </view>
		        <image class="tweet_image" mode="widthFix" :src="item.tweet_image"></image>
		        <view class="tweet_blogger">
		          <view class="blogger">
		          <image class="user_image" mode="aspectFill" :src="item.user_image"></image>
		          <view class="user">{{item.user_id}}</view>
		          <view class="thumbsup">
		            <view class="readnum">{{item.readnum}}w阅读</view>
		            <view class="thumbs_image">
		             <!-- <image src="../../static/icons/dianzan.png"></image> -->
		              <view class="thumbs_num">{{item.thumbsnum}}</view>
		              <!-- <image src="../../static/icons/fenxiang1.png"></image> -->
		            </view>
		          </view>
		        </view> 
		      </view>
		    </view>
		  </navigator>
		</view>
		<view class="searchMore">查看更多>></view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return{
				indicatorDots: true,
				autoplay: true,
				interval: 2000,//切换的间隔时间
				duration: 500,//滑动动画时长
				
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://tenfei01.cfp.cn/creative/vcg/nowarter800/new/VCG211193222077.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://alifei02.cfp.cn/creative/vcg/nowarter800/new/VCG211181746466.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://alifei01.cfp.cn/creative/vcg/nowater800/new/VCG211f8af521f.jpg',
						content: '内容 C'
					}
				],
				
				ShemeList:[
				      {
				        id: 0,
				        tweetTitle: "历史小课堂 | 为什么古代从右到左写字",
				        tweet_image: "https://img1.baidu.com/it/u=4138903771,1667633909&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=425",
				        user_image: "https://huafans-pics-p05-drcn.club.vmall.com/data/avatar/008/06/39/56_avatar_middle.jpg?_t=1620049416" ,
				        user_id: "刘一禅",
				        readnum: 17.4,
				        thumbsnum: 4128
				      },
				      {
				        id: 1,
				        tweetTitle: "历史典故 | 冯唐易老，李广难封背后的故事",
				        tweet_image: "https://img2.baidu.com/it/u=164538905,3038446301&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=271",
				        user_image: "https://huafans-pics-p05-drcn.club.vmall.com/data/avatar/020/22/77/25_avatar_small.jpg?_t=1620463118" ,
				        user_id: "岛歌riv",
				        readnum: 24.9,
				        thumbsnum: 7319
				      },
				      {
				        id: 2,
				        tweetTitle: "经验分享 | 常用礼貌用语七字诀",
				        tweet_image: "https://img1.baidu.com/it/u=2658522843,3471961648&fm=253&fmt=auto&app=138&f=JPEG?w=707&h=500",
				        user_image: "https://huafans-pics-p05-drcn.club.vmall.com/data/avatar/136/54/21/76_avatar_middle.jpg?_t=1620395531" ,
				        user_id: "妙璐璐",
				        readnum: 26.6,
				        thumbsnum: 5419
				      },
				      {
				        id: 3,
				        tweetTitle: "经典故事 | 中国古代十大神童故事",
				        tweet_image: "https://img1.baidu.com/it/u=388428053,149254739&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=500",
				        user_image: "https://huafans-pics-p05-drcn.club.vmall.com/data/avatar/136/54/21/76_avatar_middle.jpg?_t=1620395531" ,
				        user_id: "官方客服",
				        readnum: 18.6,
				        thumbsnum: 5386
				      },
				      {
				        id: 4,
				        tweetTitle: "经验分享 | 新加坡人的长相和我们有什么不同",
				        tweet_image: "https://img1.baidu.com/it/u=634482012,528565809&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=400",
				        user_image: "https://huafans-pics-p05-drcn.club.vmall.com/data/avatar/008/06/39/56_avatar_middle.jpg?_t=1620049416" ,
				        user_id: "刘一禅",
				        readnum: 17.4,
				        thumbsnum: 4128
				      },
				      {
				        id: 5,
				        tweetTitle: "影视剧场 | 上甘岭战役（原声版）",
				        tweet_image: "https://img2.baidu.com/it/u=4180229957,151088196&fm=253&fmt=auto&app=138&f=JPEG?w=781&h=500",
				        user_image: "https://huafans-pics-p05-drcn.club.vmall.com/data/avatar/136/54/21/76_avatar_middle.jpg?_t=1620395531" ,
				        user_id: "官方客服",
				        readnum: 13.6,
				        thumbsnum: 1438
				      },
				    ],
			} 
		},
		methods:{
			toDetail() {
				uni.navigateTo({
					url:"/pages/detail-trand/index"
				})
			}
		}
	}
</script>
 

<style>
	page{
		width: 100%;
		height: 100%;
	}
	.content {
		/* text-align: center; */
		height: 100vw;
	}
	.swiper-box {
		/* width: 95%; */
		height: 400rpx;
	}
	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #999;
		color: #fff;
		margin: 10px;
		border-radius: 15upx;
		height: 380upx;
	}
	.image {
		/* width: 750rpx; */
		height: 380upx;
		border-radius: 15upx;
	}
	.box1{
		border: #e1e1e1 5rpx solid;
		border-radius: 5%;
		margin: 30rpx;
	}
	.innerbox{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}
	.innerbox1{	
		display: flex;
		flex-direction: column;
		justify-content: center; 
		align-items: center;
		margin: 20rpx;
	}
	.innerbox1 image{
		height: 200rpx;
		width: 300rpx;
	}
	
	.tweetAll {
	  padding: 10rpx;
	}
	.tweetAll navigator {
	  border-radius: 6%;
	  background-color: #ffffff;
	}
	.tweetAll navigator .tweet{
		border: #d3d3d9 2rpx solid;
		border-radius: 5%;
		margin: 10rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	.tweetAll navigator .tweet .tweet_title {
	  padding: 15rpx;
	  color: black;
	}
	.tweetAll navigator .tweet .tweet_image {
	  padding: 15rpx;
	  padding-bottom: 6rpx;
	  border-radius: 8%;
	  width: 70%;
	  height: 80rpx;
	}
	.tweetAll navigator .tweet .tweet_blogger {
	  padding: 8rpx;
	  padding-top: 5rpx;
	}
	.tweetAll navigator .tweet .tweet_blogger .blogger {
	  display: flex;
	  justify-items: center;
	  align-items: center;
	}
	.tweetAll navigator .tweet .tweet_blogger .blogger image{
	  border-radius: 10%;
	}
	.tweetAll navigator .tweet .tweet_blogger .blogger .user_image {
	  padding: 13rpx;
	  height: 50rpx;
	  width: 40rpx;
	  border-radius: 50%;
	}
	.tweetAll navigator .tweet .tweet_blogger .blogger .user {
	  padding: 5rpx;
	  color: gray;
	  font-size: 28rpx;
	}
	.tweetAll navigator .tweet .tweet_blogger .blogger .thumbsup {
	  display: flex;
	  justify-items: center;
	  align-items: center;
	  padding-left: 200rpx;
	}
	.tweetAll navigator .tweet .tweet_blogger .blogger .thumbsup .readnum {
	  font-size: 24rpx;
	  width: 120rpx;
	}
	.tweetAll navigator .tweet .tweet_blogger .blogger .thumbsup .thumbs_image {
	  display: flex;
	  justify-items: center;
	  align-items: center;
	}
	.tweetAll navigator .tweet .tweet_blogger .blogger .thumbsup .thumbs_image .thumbs_num {
	  font-size: 25rpx;
	}
	.tweetAll navigator .tweet .tweet_blogger .blogger .thumbsup .thumbs_image image {
	  padding-left: 24rpx;
	  width: 25rpx;
	  height: 25rpx;
	}
	.tweettitle {
	  padding-left: 30rpx;
	  font-size: 50rpx;
	  border-bottom: 5rpx solid rgba(9, 9, 231, 0.743);
	  width: 240rpx;
	}
	.searchMore{
		color: #8C5119;
		align-items: center;
		align-self: center;
		text-align: center;
		margin-bottom: 120rpx;
	}
</style>
